<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center JNPF-flex-main">
      <div class="meeting">
        <!--搜索表单-->
        <el-card :body-style="{ padding: '15px'}">
          <MeetingQueryForm :form-data="formData" @query="handleQuery"/>
        </el-card>

        <!--主体-->
        <el-card style="margin-top:10px " :body-style="{ padding: '0px'}">
          <div class="meeting-table">
            <div slot="header" class="clearfix" style="margin:10px">
              <el-row>
                <el-col :span=20>
                  <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
                </el-col>
                <el-col :span=4 style="text-align: right ; line-height: 32px">
                  <i class="el-icon-refresh"></i>
                  <i class="el-icon-rank" style="transform: rotate(45deg)"></i>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--表格-->
          <MeetingTable :data="tableData" :page="pageQueryParams" @row-detail="handleRowDetail"
                        @row-update="handleRowUpdate"
                        @row-delete="handleRowDelete"/>
          <el-pagination
            style="text-align: right; margin:10px"
            background
            @size-change="getList"
            @current-change="getList"
            :current-page="getList"
            :page-sizes="[20,50,100,500]"
            :page-size.sync="pageQueryParams.pageSize"
            :current-page.sync="pageQueryParams.pageNum"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
          </el-pagination>
        </el-card>

        <!--表单-->
        <MeetingForm ref="MeetingForm" v-if="formVisible" @refresh="refresh"/>

      </div>
    </div>
  </div>

</template>

<script>
import MeetingQueryForm from './components/meeting-query-form'
import MeetingForm from './components/meeting-form'
import MeetingTable from './components/meeting-table'


//搜索路由MeetingData
import {MeetingData} from '@/api/bt/meeting/meetingData'
import {MeetingDeleteById} from '@/api/bt/meeting/meetingData'

export default {
  name: "index",
  components: {
    //会议头部搜索
    MeetingQueryForm,
    //会议主体表格
    MeetingTable,
    MeetingForm
  },
  data() {
    return {
      // * 新增，修改，详情页面显示与否
      formVisible: false,
      //表格数据
      tableData: [],
      //分页数据
      pageQueryParams: {
        pageNum: 1, //默认在第一页
        pageSize: 20, //默认每页展示10条数据
      },
      //总条数
      total: 0,
      //总查询参数（包括分页）
      queryForm: {},
      formData: {
        //标题
        title: undefined,
        //组织单位
        ou: undefined,
        //地点
        place: undefined,
        //开始时间
        startTime: undefined,
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.queryForm = {...this.formData, ...this.pageQueryParams}
      MeetingData(this.queryForm).then((response) => {
        this.total = response.data.total
        this.tableData = response.data.list
      })
    },
    // * 表格查询
    handleQuery(formData) {
      this.getList()
    },
    //点击新增
    handleAdd() {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs['MeetingForm'].init(undefined, false)
      })
    },
    // * 新增，修改，详情页面显示关闭，新增，修改后刷新
    refresh(isRefresh) {
      this.formVisible = false
      if (isRefresh) {
        this.getList()
      } //表格刷新方法
    },
    // * 表格操作
    handleRowDetail(id, flag = true) {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs['MeetingForm'].init(id, flag)
      })
    },
    handleRowUpdate(id, flag = false) {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs['MeetingForm'].init(id, flag)
      })
    },
    handleRowDelete(id) {
      this.$alert('你确定要删除该行数据吗', '警告', {
        confirmButtonText: '确定',
        callback: (action) => {
          if (action === 'confirm') {
            MeetingDeleteById(id).then((response) => {
              this.$message({
                message: response.msg,
                type: 'success',
                duration: 1500,
              })
              this.getList()
            })
          }
        },
      })
    },
  },
}
</script>

<style scoped>

</style>
